<template>
	<transition name='fade'>
		<div class='shop pages'>
			<div class='banner'>
				<van-swipe :autoplay="5000" style="height: 150px" :show-indicators="!1">
		        	<van-swipe-item v-for="(item, index) in banners" class='banner-item' :key="item.id">
		            	<img :src="item.cover" alt="item.slide_name" />
		            	<p class='banner-text'>
		              		{{ item.slide_name }}

		              		<span class='page'>
				                {{ index + 1 }}
				                <em>/</em>
				                {{ banners.length }}
			              	</span>
		            	</p>
		          	</van-swipe-item>
		        </van-swipe>
			</div>

			<div class='seckill section'>
		    	<div class="module-title-wrap">
		          <h2 class='module-title'>
		            秒杀专场
		          </h2>
		        </div>

		        <div class='seckill-con'>
		        	<div class='seckill-tab'>
		            	<div class='seckill-time-item active'>
			              5月12日 10:00
			              <p>已开枪</p>
		            	</div> 
			            <div class='seckill-time-item'>
			              5月12日 10:00
			              <p>已开枪</p>
			            </div> 
			            <div class='seckill-time-item'>
			              5月12日 10:00
			              <p>已开枪</p>
			            </div> 
		        	</div> 

        			<div class='seckill-list'>
        				<div class="seckill-item" v-for="(item, index) in seckills" :key="item.id">
        					<div class='pic-wrap'>
        						<img :src="item.cover" :alt="item.name" />
        					</div>

        					<div class='info'>
        						<div class="first-line">
        							<span class="name ellipsis-2">{{item.name}}</span>
						        </div>
						        <div class="second-line">
						        	<div class="item-price">
						        	 	<span class="item-stock" v-if="item.sellnum > 0">已售:{{item.sellnum }}</span>
						        	 	<span class="item-price_new">￥{{item.true_price}}</span>
						        	 	<Icon type="ios-cart" class='icon'></Icon>
						        	</div>
						        </div>
        					</div>
        				</div>
        			</div>
		        </div> 
		    </div>

		    <div class='recommend'>
		    	<div class="module-title-wrap">
		          <h2 class='module-title'>
		            精品推荐
		          </h2>
		        </div>
			
				<products-grid :lists="products"></products-grid>
		    </div>
		</div>
	</transition>
</template>

<script>
	import ProductsGrid from 'base/ProductsGrid'

	export default{
		components: {
			ProductsGrid
		},
		data() {
			return {
				loading		: true,
				banners     : [{
		          cover     : '/static/images/icon.png',
		          slide_name: '----'
		        },{
		          cover     : '/static/images/icon.png',
		          slide_name: '----'
		        },{
		          cover     : '/static/images/icon.png',
		          slide_name: '----'
		        }],
		        products  	: [],
		        seckills 	: []
			}
		},
		created() {
			setTimeout(() => {
				this.topShow 	= true
				this.bottomShow = true
				this.loading 	= false
			}, 2000)

		},
		activated() {
			this.getShop()
		},
		methods: {
			getShop() {
				this.HttpService.getShop().then(data => {
					let d = data.data
					if(!data.status) {
						this.banners 		= d.banners
						this.products 		= d.products
						this.seckills 		= d.seckills || d.products
					}
				})
			},
			onEnter() {
				console.log('enter')
			},
			skip(item, index) {
				this.activeTab = index
			},
			login() {

			},
			getConfig() {
		      this.HttpService.getGlobalConfig().then(data => {
		        if (data) {
		          this.config = data.config
		          // this.$store.commit('setTicketCount', data.config.num)
		        }
		      })
		    },
		    getUserInfo() {
		      if (this.util.getStorageSync('session'))
		        this.HttpService.signIn()
		    },
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	@import "./index.css"
	
	::-webkit-scrollbar
		width: 0
	
	.seckill-list
		font-size: 0
		white-space: nowrap
		overflow-x: scroll
		
	.seckill-item
		display: inline-block
		width: 31%
		padding: 1%
		margin: 0 1%
		font-size: 14px
		white-space: normal
		
		.pic-wrap
			img
				width: 100%
				height: 120px
		.info
			.first-line
				height: 32px
				margin-top: 5px
				line-height: 16px
				overflow: hidden	
			.second-line
				position: relative
				margin-top: 5px
				font-size: 12px	
				.item-stock
					display: block
					width: 100%
					color: #999
				.item-price_new
					color: #f60
					font-weight: bold
					font-size: 14px
				.icon
					position: absolute
					right: 1%
					bottom: 0
					padding:0 3px
					font-size: 20px
					color: #fff
					br(3px)
					background-color: $mc		
	
	.loading
		position: fixed
		top: 50px
		bottom: 55px
		left: 0
		right: 0
		z-index: 999
		width: auto
		height: auto
	
	.move-enter-active, .move-leave-active
		transition:all 0.4s
	.move-enter
		transform: translate3d(100%, 0px, 0)
	.move-leave
		transform: translate3d(0, 0, 0)
		
	.bottom-enter-active, .bottom-leave-active
		transition:all 0.4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
	.bottom-enter
		transform: translate3d(0, 55px, 0)
	.bottom-leave
		transform: translate3d(0, 0px, 0)
</style>